<template>
  <div class="tm-gauge-color">
    <div class="color-line" v-for="(item, index) in currValue" :key="index">
      <div class="color-line-item">
        <el-input-number v-model="item[0]" :min="0" :max="1" :step="0.1"/>
      </div>
      <div class="color-line-item">
        <el-color-picker v-model="item[1]" show-alpha />
      </div>
      <div class="color-line-item" v-show="index > 1">
        <i class="el-icon-delete" @click="onRemove(index)"></i>
      </div>
    </div>
    <div class="color-add" @click="onAdd">增加颜色: <i class="el-icon-plus"></i></div>
  </div>
</template>

<script>
export default {
  name: 'tm-gauge-color',
  cnName: '仪表盘-颜色',
  props: {
    value: Array
  },
  data() {
    return {
      currValue: this.value
    }
  },
  methods: {
    onAdd() {
      this.currValue.push([0.1, '#00C3FF'])
      this.$emit('input', this.currValue)
    },
    onRemove(index) {
      this.currValue.splice(index, 1)
      this.$emit('input', this.currValue)
    }
  },
  watch: {
    value(nval) {
      this.currValue = nval
    }
  }
}
</script>

<style lang="less" scoped>
.tm-gauge-color {
  color: var(--text-color);
  .color-line {
    display: flex;
    margin-bottom: 8px;

    &-item {
      margin-right: 5px;
    }
  }
  .color-add {
    cursor: pointer;
  }
}
</style>
